<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/form-elements.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/layer.css">
    <title>重置密码</title>
    <style>
        body {
            background: url("img/bg.jpg") no-repeat fixed;
            background-size: cover;
            overflow: hidden;
        }

    </style>
</head>
<body>

<div class="container myBox">
    <div class="col-xs-8 col-xs-offset-4 col-sm-6 col-sm-offset-3 form-box">
        <div class="form-top">
            <div class="form-top-left">
                <h3>重置密码</h3>
                <p>请输入您的邮箱:</p>
            </div>
            <div class="form-top-right">
                <i class="fa fa-key"></i>
            </div>
        </div>
        <div class="form-bottom">
            <form role="form" action="/user/resist" method="post" class="login-form">

                <!--上面的输入框尽可能不需要外边距，使用row解决-->
                <input type="hidden" name="genrateNum" value="${yzmNumber}" id="genrateNum">
                <div class="row">
                    <div style="margin-bottom: 15px" class="form-inline">
                        <label class="sr-only" for="email">email</label>
                        <input type="text" name="email" placeholder="邮箱" class="form-email"
                               id="email">
                        <%--<input type="button" class="btn btn-primary" value="发送验证码" id="send"><input type="text" value="300" id="send1" style="width: 80px;height: 30px"><a >s</a>--%>
                        <input type="button" id="send" value="免费获取验证码" onclick="settime(this)" />
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="yzm">验证码</label>
                        <input type="text" name="yzm" placeholder="验证码" class="form-control" id="yzm">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="password">Password</label>
                        <input type="password" name="password" placeholder="新密码" class="form-password form-control"
                               id="password">
                    </div>
                </div>
                <button type="submit" class="btn" onclick="resist()" id="btnSubmit">重置</button>

                <div class="row">
                    <div style="padding: 10px 25px">
                        <div style="display: inline-block;float: left" class="text-left"><a href="index.jsp">返回登录</a>
                        </div>
                        <!--<div style="display: inline-block;float: right" class="text-right"><a href="#">没有账号?</a></div>-->
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>


<!-- Javascript -->
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/jquery.backstretch.min.js"></script>
<script src="/js/scripts.js"></script>
<script src="/js/layer.js"></script>
</body>
</html>
<script>
    //倒计时

    var countdown=60;
    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value="免费获取验证码";
            countdown = 60;
        } else {
            val.setAttribute("disabled", true);
            val.value="重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function() {
            settime(val)
        },1000)
    }

    $("#send").click(function () {
        //发送验证之后，倒计时
        var email = $("#email").val();
        var postData = "email=" + email;
        var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        if (!myreg.test(email)) {
            alert('请输入有效的E_mail!');
            return;
        } else {
            $.ajax(
                {
                    url: "/user/sendemail",
                    data: postData,
                    type: "get",
                    success: function () {
                        layer.msg("发送成功")
                    },
                    error: function () {
                        layer.msg("发送失败")
                    }
                }
            )
        }
    })

    <!--重置密码-->
    function resist() {
        var email = $("#email").val();
        //点击如果有这个用户就返回1
        $.ajax({
            url: "/user/checkEmail",
            type: "post",
            data: "email=" + email,
            success: function (res) {
                if (res == "1") {
                    // $("#send").removeProp("disabled");
                    //获取邮箱 密码 验证码
                    var email = $("#email").val();
                    var password = $("#password").val();
                    var yzm = $("#yzm").val();
                    var genrateNum = $("#genrateNum").val();

                    var postData1 = {
                        email: email,
                        password: password
                    }
                    if (password.length == 0) {
                        alert("称呼不能为空!");
                        return;
                    }
                    if (yzm.length == 0) {
                        alert("邮箱不能为空!");
                        return;
                    }

                    var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                    if (!myreg.test(email)) {
                        alert('请输入有效的E_mail!');
                        return;
                    }

                    //如果验证与后端生成的验证码一样就可重置
                    if (!yzm.equalTo(genrateNum)) {
                        layer.msg("验证码错误");
                        $("#yzm").value = "";
                        return;
                    } else {
                        $.ajax({
                            url: "/user/resist",
                            data: postData1,
                            type: "get",
                            success: function () {
                                layer.msg("重置成功")
                            },
                            error: function () {
                                layer.msg("重置失败")
                            }
                        })
                    }
                } else {
                    layer.msg("没有这个用户");
                    $("#email").value = " ";
                    location.reload();
                }
            },
            error: function (res) {
                if (res == "0") {
                    layer.msg("没有这个用户");
                    $("#email").value = " ";
                }
            }
        })
    }

</script>